<template>
    <div class="container">
        <div class="handle-box">
                <el-form ref="form" :model="form" label-width="120px" class="flex">
                    <el-form-item label="账户名称：">
                        <el-input v-model="names" placeholder="请输入名称" class="handle-input mr10" @input="mohu()"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search">查询</el-button>
                        <el-button type="success" icon="el-icon-plus" @click="add">新增</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table
                :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            >
                <el-table-column type="index" :index="indexMethod" label="ID"></el-table-column>
                <el-table-column prop="ROLE_NAME" label="角色权限"></el-table-column>
                <el-table-column prop="ROLE_LEVEL" label="角色级别"></el-table-column>
                <el-table-column prop="REMARK" label="备注"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            @click="handleDelete(scope.$index, scope.row)" style="color:red"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page="currentPage"  
                    :page-size="pageSize"
                    :total="tableData.length"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
            <!-- 编辑弹出框 -->
            <el-dialog v-dialogDrag title="编辑角色" :visible.sync="editVisible" width="50%">
                <el-form ref="form" :model="form" label-width="100px" class="flex">
                    <el-form-item label="角色姓名："  class="wid50">
                        <el-input v-model="form.ROLE_NAME" placeholder="请输入角色姓名" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="备注："  class="wid50">
                        <el-input v-model="form.REMARK" placeholder="请输入备注" class="handle-input mr10"></el-input>
                    </el-form-item>
                     <el-form-item label="角色级别："   class="wid50">
                        <el-select v-model="form.ROLE_LEVEL" placeholder="请选择" @change="changerole">
                          <el-option v-for="item in rolelevel" :key='item.rolelevelindex' :label="item.roleleveltitle" :value="item.roleleveltitle">
                          </el-option>
                        </el-select>
                    </el-form-item> 
                        
                </el-form>
                <el-form label-width="100px" class="flex">
                     <el-form-item label="功能页面："  class="wid50">
                        <div style="margin: 15px 0;"></div>
                         <el-tree
                          :data="data"
                          show-checkbox
                          node-key="id"
                          ref="tree"
                          :default-expanded-keys="[2, 3]"
                          :default-checked-keys="checkedCities"
                          :props="defaultProps">
                        </el-tree>    
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit(form)">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 新增弹框 -->
            <el-dialog v-dialogDrag title="新增角色" :visible.sync="addVisible" width="50%" >
                <el-form ref="addform" :model="addform" label-width="120px" class="flex">
                    <el-form-item label="角色名称："  class="wid50">
                        <el-input v-model="addform.name" placeholder="请输入名称" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="备注："  class="wid50">
                        <el-input v-model="addform.REMARK" placeholder="请输入备注" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="角色级别："   class="wid50">
                        <el-select v-model="addform.ROLE_LEVEL" placeholder="请选择" @change="changerole">
                          <el-option v-for="item in rolelevel" :key='item.rolelevelindex' :label="item.roleleveltitle" :value="item.roleleveltitle">
                          </el-option>
                        </el-select>
                    </el-form-item>          
                    
                     <!-- <el-form-item label="手机号：" class="wid50">
                        <el-input v-model="phone" placeholder="请输入名称" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="小区：" class="wid50">
                        <el-input v-model="community" placeholder="请输入名称" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="楼号：" class="wid50">
                        <el-input v-model="building" placeholder="请输入名称" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="单元：" class="wid50">
                        <el-input v-model="unit" placeholder="请输入名称" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="门牌号：" class="wid50">
                        <el-input v-model="housenumber" placeholder="请输入名称" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="卡号：" class="wid50">
                        <el-input v-model="cardnumber" placeholder="请输入名称" class="handle-input mr10"></el-input>
                    </el-form-item> -->
                </el-form>
                <el-form label-width="120px" class="flex">
                    <el-form-item label="功能页面：">
                        <el-tree
                          :data="data"
                          show-checkbox
                          node-key="id"
                          ref="tree"
                          :default-expanded-keys="checkedCities"
                          :default-checked-keys="checkedCities"
                          :props="defaultProps">
                        </el-tree> 
                    </el-form-item>
                </el-form>
                 
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveadd(addform)">确 定</el-button>
                </span>
            </el-dialog>
        </div>
</template>
<script>
const cityOptions = [
{title:'分类信息',index:1},
{title:'居民分类信息',index:2},
{title:'单位分类信息',index:3},
{title:'实时动态',index:4},
{title:'实时投放',index:5},
{title:'指导员',index:6},
{title:'大数据统计',index:7},
{title:'积分统计',index:8},
{title:'累计投放积分规则设置',index:9},
{title:'消费积分规则设置',index:10},
{title:'积分展示',index:11},
{title:'街道积分',index:12},
{title:'社区积分',index:13},
{title:'小区积分',index:14},
{title:'居民积分',index:15},
{title:'垃圾量统计',index:16},
{title:'垃圾收集量',index:17},
{title:'街道统计',index:18},
{title:'社区统计',index:19},
{title:'小区统计',index:20},
{title:'居民统计',index:21},
{title:'机关单位',index:22},
{title:'基本信息',index:23},
{title:'街道信息管理',index:24},
{title:'社区信息管理',index:25},
{title:'小区信息管理',index:26},
{title:'居民信息管理',index:27},
{title:'机关事业单位/餐饮单位',index:28},
{title:'指导员信息管理',index:29},
// {title:'巡查员信息管理',index:30},
{title:'垃圾点管理',index:31},
// {title:'巡查记录统计',index:32},
{title:'角色管理',index:33},
{title:'账户管理',index:35},
{title:'预约信息',index:36},
{title:'已预约订单',index:37},
{title:'已收集订单',index:38},
{title:'收集员信息管理',index:39},
{title:'垃圾收集量上传',index:40},
{title:'已预约兑换订单',index:41},
{title:'已兑换订单',index:42},];
import '../../assets/css/common.css'

export default {
    data(){
        return{
          data: [{
          id: 1,
          label: '分类信息',
          children: [{
            id: 2,
            label: '居民分类信息'
          },{
              id: 3,
              label: '单位分类信息'
          }]
        }, {
          id: 4,
          label: '实时动态',
          children: [{
            id: 5,
            label: '投放信息'
          },{
            id: 47,
            label: '违规信息'
          }]
        }, {
          id: 6,
          label: '指导员'
        }, {
          id: 58,
          label: '巡查员'
        },{
          id: 7,
          label: '大数据统计',
          children: [{
                  id: 44,
                  label: '小区指导员作业统计'
              },{
                  id: 45,
                  label: '小区居民投放统计'
              },{
                  id: 46,
                  label: '小区垃圾分类数据统计'
              }]
        },{
          id: 8,
          label: '积分统计',
          children: [{
              id: 9,
              label: '累计投放积分规则设置'
          },{
              id: 10,
              label: '消费积分规则设置'
          },{
              id: 11,
              label: '积分展示',
              children: [{
                  id: 50,
                  label: '全区积分'
              },{
                  id: 12,
                  label: '街道积分'
              },{
                  id: 13,
                  label: '社区积分'
              },{
                  id: 14,
                  label: '小区积分'
              },{
                  id: 15,
                  label: '居民积分'
              }]
          }]
        }
        ,{
              id: 16,
              label: '垃圾量统计',
              children: [{
                  id: 51,
                  label: '垃圾收集量上传'
              },{
                  id: 17,
                  label: '垃圾收集量',
                  children: [{
                      id: 18,
                      label: '街道统计'
                  },{
                      id: 19,
                      label: '社区统计'
                  },{
                      id: 20,
                      label: '小区统计'
                  },{
                      id: 21,
                      label: '居民统计'
                  },{
                      id: 22,
                      label: '机关单位'
                  },{
                      id: 51,
                      label: '区域统计'
                  }]
              }]
          },
          {
              id: 36,
              label: '预约收集信息',
              children:[{
                  id: 37,
                  label: '已预约订单'
              },{
                  id: 38,
                  label: '已收集订单'
              }]
          },{
              id: 48,
              label: '投放违规',
              children:[{
                  id: 49,
                  label: '违规查询'
              },{
                  id: 50,
                  label: '违规统计'
              }]
          },{
              id: 40,
              label: '兑换信息',
              children:[{
                  id: 41,
                  label: '预约兑换订单'
              },{
                  id: 42,
                  label: '预约兑换明细'
              },{
                  id: 43,
                  label: '兑换历史订单'
              }]
          },{
              id: 52,
              label: '督导员管理',
              children:[{
                  id: 53,
                  label: '督导员基础信息管理'
              },{
                  id: 54,
                  label: '督导员工作时长统计'
              },{
                  id: 55,
                  label: '督导员出动情况统计'
              }]
          },{
              id: 59,
              label: '反馈管理',
              children:[{
                  id: 60,
                  label: '问题反馈'
              },{
                  id: 61,
                  label: '巡查员打分'
              },]
          },{
              id: 23,
              label: '基本信息',
              children: [{
                  id: 24,
                  label: '街道信息管理'
              },{
                  id: 25,
                  label: '社区信息管理'
              },{
                  id: 26,
                  label: '小区信息管理'
              },{
                  id: 27,
                  label: '居民信息管理'
              },{
                  id: 28,
                  label: '机关事业单位/餐饮单位'
              },{
                  id: 29,
                  label: '指导员信息管理'
              },{
                  id: 39,
                  label: '收集员信息管理'
              },{
                  id: 30,
                  label: '巡查员信息管理'
              },{
                  id: 31,
                  label: '垃圾点管理'
              },{
            //       id: 32,
            //       label: '巡查记录统计'
            //   },{
                  id: 33,
                  label: '角色管理'
              },{
                  id: 35,
                  label: '账户管理'
              }]
            }],
            defaultProps: {
              children: 'children',
              label: 'label'
            },
            rolelevel: [{
                roleleveltitle: '行政区',
                rolelevelindex: 1 
            },{
                roleleveltitle: '街道',
                rolelevelindex: 2 
            },{
                roleleveltitle: '社区',
                rolelevelindex: 3 
            },{
                roleleveltitle: '小区',
                rolelevelindex: 4 
            },{
                roleleveltitle: '机关单位',
                rolelevelindex: 5 
            }],
            currentPage:1, //初始页
            pagesize:10,    //    每页的数据
            userList: [],
            address:'',
            names:'',
            addVisible:false,
            checkAll: false,
            checkedCities: [],
            cities: cityOptions,
            isIndeterminate: true,
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            addform:{},
            idx: -1,
            id: -1,
            checklall: '',
        }
    },
    created() {
        // this.getData();
        // this.getrole()
        this.getrolelist()
        Array.prototype.indexOf = function (val){
            for(var i = 0; i<this.length;i++){
                if(this[i] == val) return i;
            }
            return -1;
        }
        Array.prototype.remove = function(val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
    },
    methods: {
        indexMethod(index) {
          return index + 1;
        },
        getrolelist(){
            this.$axios({
                // http://111.160.78.62:5578
                url: this.$rurl + '/GetRoleModelsApi',
                method: 'get'
            }).then(res=>{
                console.log(res.data)
                this.tableData = Object.assign([],res.data)
            })
        },
        handleCheckAllChange(value) {
            console.log(value)
            this.checkedCities = val ? cityOptions : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            // console.log()
            this.checklall = Object.assign([],value)
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },    
        //新增
        add(){
            this.addVisible = true;
        },
        // 新增保存
        saveadd(addform){
            console.log(addform)
            var array = this.$refs.tree.getCheckedKeys()
            array.filter(res=>{
                if(res == 2 || res == 3){
                    array.push(1)
                }else if(res == 9 || res == 10 || res == 11){
                    array.push(8)
                }else if(res == 12 || res == 13 ||  res == 14 || res == 15){
                    array.push(11)
                }else if(res == 18 || res == 19 || res == 20 || res == 21 || res == 22){
                    array.push(16,17)
                }else if(res == 24 || res == 25 || res == 26 || res == 27 || res == 28 || res == 29 || res == 30 || res == 31 || res == 32 || res == 33 || res == 35){
                    array.push(23)
                }else if(res == 37 || res == 38){
                    array.push(36)
                }
            })
            var arrayset = [...new Set(array)]
            console.log(arrayset)
            console.log({
                    ROLE_FUNCTION: arrayset.join(","),
                    ROLE_NAME: addform.name,
                    REMARK: addform.REMARK,
                    ROLE_LEVEL: addform.ROLE_LEVEL
                })
            this.$axios({
                url:this.$rurl + '/AddRoleApi',
                method: 'post',
                data:{
                    ROLE_FUNCTION: arrayset.join(","),
                    ROLE_NAME: addform.name,
                    REMARK: addform.REMARK,
                    ROLE_LEVEL: addform.ROLE_LEVEL
                }
            }).then(res=>{
                if(res.data.IsSucess){
                    this.$message.success('新增成功')
                    this.addVisible = false
                    this.getrolelist()
                }
            })
        },
        // 模糊查询
        mohu() {
            var search = this.names;
            console.log(search)
            var newdate = [];
            if(search){
                if(search)
                 this.tableData.filter(item=>{
                    if(item.ROLE_NAME.includes(search)){
                        newdate.push(item)
                    }
                })
            }else if (search == ''){
                this.getrolelist()
            }
            this.tableData = newdate
        },
        // 点击查询
        btnsearch(){

        },
        // 编辑操作
        handleEdit(index, row) {
            this.form = row;
            console.log(row)
            var array = (row.ROLE_FUNCTION).split(',')
               array.remove('1')
               array.remove('8')
               array.remove('11')
               array.remove('16')
               array.remove('17')
               array.remove('23')
               array.remove('36')
            console.log(array)
            this.checkedCities = array

            this.editVisible = true;
        },
        // 保存编辑
        saveEdit() {
             var array = this.$refs.tree.getCheckedKeys()
            //  console.log(array)
            array.filter(res=>{
                if(res == 2 || res == 3){
                    array.push(1)
                }else if(res == 9 || res == 10 || res == 11){
                    array.push(8)
                }else if(res == 12 || res == 13 ||  res == 14 || res == 15){
                    array.push(11)
                }else if(res == 18 || res == 19 || res == 20 || res == 21 || res == 22){
                    array.push(16,17)
                }else if(res == 24 || res == 25 || res == 26 || res == 27 || res == 28 || res == 29 || res == 30 || res == 31 || res == 32 || res == 33 || res == 35){
                    array.push(23)
                }else if(res == 37 || res == 38){
                    array.push(36)
                }
            })
            // console.log([...new Set(array)])
            var arr = [...new Set(array)]
            // console.log()
            let studenteList=this.form;
            console.log({
                   ROLEID: studenteList.ROLEID,
                   ROLE_FUNCTION: arr.join(','),
                   ROLE_NAME: studenteList.ROLE_NAME,
                   REMARK: studenteList.REMARK,
                   ROLE_LEVEL: studenteList.ROLE_LEVEL
                })
            this.$axios({
                //this.$rurl +  /UpdateRoleApi
                url: this.$rurl + '/UpdateRoleApi',
                method: 'post',
                data: {
                   ROLEID: studenteList.ROLEID,
                   ROLE_FUNCTION: arr.join(','),
                   ROLE_NAME: studenteList.ROLE_NAME,
                   REMARK: studenteList.REMARK,
                   ROLE_LEVEL: studenteList.ROLE_LEVEL
                }
            }).then(res=>{
                console.log(res.data)
                if(res.data.IsSucess){
                    this.$message.success('编辑成功')
                    this.editVisible = false
                    this.getrolelist()
                }
            })
            // this.editVisible = false;
            // this.$message.success('办卡成功');
            // console.log()
            // this.$set(this.tableData, this.idx, this.form);
        },
        // 分页导航
        handlePageChange(currentPage) {
            this.currentPage = currentPage;
            // this.$set(this.query, 'pageIndex', val);
            // this.getData();
        },
        handleSizeChange(size){
            this.pagesize = size;
        },
        handleDelete(index, row) {
            this.$confirm('确定删除？', '提示', {
                type: 'warning'
            }).then(res=>{
                this.$axios({
                url: this.$rurl + '/DeleteRoleApi',
                method:'get',
                params:{
                    ROLEID: row.ROLEID
                }
                }).then(res=>{
                    this.$message.success('删除成功')
                    this.getrolelist()
                })
                
            })
            
        }
    }
}
</script>
<style scoped>
    .el-select{
        width: 100%;
    }
    .el-input{
        width: 100%;
    }
    /* /deep/.el-dialog__body{
        height: 400px;
        overflow-y: scroll;
    } */
</style>